<template>
    <z-paging>
        <u-sticky>
            <hedsty :mrbot="32" :headCentext="'换箱'"></hedsty>
            <view class="right_fenlei_box">
					<view class="right_xuanze_box" @click="selectBtn">{{ selName }}</view>
					<view class="xuanze_icon_box" @click="selectBtn"><u-icon :name="upandDown" color="#fff"
							size="18"></u-icon></view>
				</view>
        </u-sticky>
        <view class="dange_box" @click="godetail(item)" :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/hx/' + (item.is_finish == 0 ? '1' : '01') + '.png)' }"  v-for="(item,index) in bonusList" :key="index" >
            <view class="left_box" style="background-image: url('https://morgan.dingxians.cn/static/hx/2.png');" v-if="item.is_finish == 0">
                <view class="dijixiang_box">{{ item.boxs }}箱</view>
                <view class="shengjixiang_box">剩{{ item.residue_num }}张</view>
            </view>
            <view class="left_box" style="background-image: url('https://morgan.dingxians.cn/static/hx/02.png');" v-else>
                <view class="dijixiang_box" style="background-color: rgba(147, 147, 147, .7);">{{ item.boxs }}箱</view>
                <view class="shengjixiang_box" style="background-color: rgba(147, 147, 147, .7);">剩{{ item.residue_num }}张</view>
            </view>
            <view class="right">
                <view class="dange_xiangzi_box" v-for="(items,indexs) in item.prizes" :key="indexs">{{ items.level_name + items.nums }}</view>
            </view>
        </view>
        
        <u-picker :show="is_Selshow" @cancel="is_Selshow=false" :columns="selectList" @confirm="confirm"></u-picker>
    </z-paging>
</template>
<script>
import hedsty from '../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
				mhId: '', 
				selectList:[],
				selName: '1-10', 
				is_Selshow: false, 
				antianshow: false, 
				bonusList: [],
                tag:''
        }
    },
    computed: {
			// 三角上下方向监听
			upandDown() {
				let upandDown = ''
				if (this.is_Selshow) {
					upandDown = 'arrow-up-fill'
				} else {
					upandDown = 'arrow-down-fill'
				}
				return upandDown
			},
		},
        onLoad(e) {
			this.mhId = e.id

		},
    onShow() {
        this.getList()
    },
    methods: {
        getList() {
				let data = {
					challenge_box_id: this.mhId,
				}
				this.$Request.get(this.$api.index.challengeBoxPrizesGetBoxs, data).then(res => {
					if (res.code == 200) {
						this.selectList.push(res.data.data)
                        console.log(this.selectList)
						this.selName = res.data.data[0]
						this.queryList()
					}
				})

			},
        queryList() {
            uni.showLoading({
                title:'加载中',
            })
				let data = {
					challenge_box_id: this.mhId,
					boxs: this.selName,
					tag: this.tag
				}
				this.$Request.get(this.$api.index.challengeBoxPrizesExchangeBoxs, data).then(res => {
                    uni.hideLoading({})
					if (res.code == 200) {
						res.data.data.forEach((item) => {
							item.flag = false
						});
						this.bonusList = res.data.data
					}
				})
			},
			selectBtn() {
				this.is_Selshow = true

			},
            godetail(item){
                uni.setStorageSync('boxs', item.boxs)
				this.$goBack()
            },
			confirm(e){
				this.is_Selshow = false
                this.selName = e.value[0]
                this.queryList()
            }
    }
}
</script>
<style lang="scss" scoped>
.right_fenlei_box {
				height: 52rpx;
				width: 190rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 52rpx;

				.right_xuanze_box {
					height: 52rpx;
					color: #fff;
					line-height: 52rpx;
					font-weight: bold;
					font-size: 28rpx;
					margin-right: 16rpx;
				}

				.xuanze_icon_box {
					// height: 52rpx;
					color: #fff;
					line-height: 52rpx;
				}

			}
.dange_box {
    width: 690rpx;
    min-height: 210rpx;
    background-size: 100% 100%;
    margin: auto;
    box-sizing: border-box;
    padding-top: 24rpx;
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;

    .left_box {
        width: 216rpx;
        height: 180rpx;
        background-size: 100% 100%;
        position: relative;

        .dijixiang_box {
            width: 120rpx;
            height: 36rpx;
            background: rgba(239, 31, 31, .7);
            border-radius: 18rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 36rpx;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 79rpx;
        }

        .shengjixiang_box {
            width: 120rpx;
            height: 36rpx;
            background: rgba(239, 31, 31, .7);
            border-radius: 18rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 36rpx;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            top: 127rpx;
        }
    }

    .right {
        width: 400rpx;
        // height: 180rpx;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .dange_xiangzi_box {
            // width: 100rpx;
            text-align: center;
            height: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 30rpx;
            margin-right: 42rpx;
            margin-bottom: 23rpx;
        }
    }
}
</style>